<template>
  <div class="ano-panel ano-colors">
    <AnoPanelHd 
      :hasBackBtn="true" 
      title="选择颜色" 
      @onBack="handleConfirm"
      @onClose="handleConfirm" />
    <div class="ano-panel-bd" v-loading="loading">
      <ul class="list">
        <li class="item" 
          v-for="item in colors" 
          :class="{'active': fontColor.color === getColorByRGB(item)}"
          :key="item.value" 
          :style="{backgroundColor: getColorByRGB(item)}"
          @click="handleSelect(item)"></li>
      </ul>

      <div class="handle-wrap">
        <el-button class="panel-btn" type="primary" @click.stop="handleConfirm">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import AnoPanelHd from './anoPanelHd.vue'
import { hexToRgb, rgbTohex } from '@/lib/utils'
import { getColors } from '@/api/design'

export default {
  name: 'anoArtPanel',
  components: {
    AnoPanelHd
  },
  props: {
    active: {
      type: String,
    }
  },
  data() {
    return {
      loading: true,

      colors: [
        // {
        //   colorB: 0,
        //   colorG: 0,
        //   colorName: "Black",
        //   colorR: 0,
        //   id: 0,
        //   sort: 0,
        // },
      ],
      fontColor: {
        color: this.active
      }
    }
  },
  created() {
    getColors().then(res => {
      if (res.data.code === '0') {
        this.colors = res.data.result.records || []
      }
    }).finally(() => {
      this.loading = false;
    })
  },
  methods: {
    handleSelect(item) {
      this.fontColor = {
        color: this.getColorByRGB(item),
        colorR: item.colorR,
        colorG: item.colorG,
        colorB: item.colorB,
      };
    },
    getColorByRGB(colorItem) {
      return `rgb(${colorItem.colorR}, ${colorItem.colorG}, ${colorItem.colorB})`
    },
    handleConfirm() {
      if (this.active === this.fontColor.color) {
        this.$emit('confirm')
      } else {
        this.$emit('colorChange', {
        color: this.getColorByRGB(this.fontColor),
        colorR: this.fontColor.colorR,
        colorG: this.fontColor.colorG,
        colorB: this.fontColor.colorB,
      })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ano-colors {
  .list {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 42px;
    .item {
      position: relative;
      width: 32px;
      height: 32px;
      margin-left: 7px;
      margin-right: 7px;
      margin-bottom: 16px;
      border-radius: 3px;
      background-color: #bbccaa;
      cursor: pointer;
      user-select: none;
      box-shadow: 1px 1px 1px 1px #ddd;
      &.active {
        box-shadow: 1px 1px 1px 1px #333;
      }
    }
  }
   .handle-wrap {
     padding-right: 42px;
     text-align: right;
     .panel-btn {
       width: 80px;
     }
   }
 }
</style>
